<template>
	<view>
		<view class="home-header pd5_15" :style="'background: #01B750;'" style="display: flex;">
			<!-- 标题栏和状态栏占位符 -->
				<navigator url="/pages/client/mendian" style="width: 60%;margin-top: 9rpx;">
					<view class=" flex alcenter space  cl-w9">
						<view  class="flex alcenter" style="width: 100%;white-space: nowrap;">
							<image :src="mendian.avatar" mode="aspectFill" style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 20rpx;"></image>
							<text class="text-over ft14" style=" margin-right: 15rpx;">{{mendian.nickname?mendian.nickname:"请选择门店"}}</text>
							<text class="iconfont iconicon_arrow_small ft12"></text>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/client/shop/search" style="width: 40%;">
					<view class=" flex  cl-w9">
						<view  class="flex alcenter" style="width: 100%;padding-top: 15rpx;justify-content:flex-end;">
							<view style="padding-right: 20rpx;width: 80%;background: white;
							height: 70rpx;border-radius: 35rpx;display: flex;align-items: center; ">
								<image src="../../static/img/ss.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;margin: 0 20rpx;"></image>
								<text class="text-over ft14" style=" margin-right: 20rpx;color: #01B750;">搜索</text>
								 
							</view>
						</view>
					</view>
				</navigator>
			
		</view>
		<view class="mt10" style="margin: 0px;">
			<home-banner :banners="banners"></home-banner>
		</view>
		<view class="">	
			<view class="integal-mall-menutop" v-if="shopmenu.length>0">
				<view class="integal-mall-menu flex pt10 pb16">
					<block v-for="(value,key) in shopmenu" :key="key" v-if="key<5">
					<view class="col2 text-center" :class="key>0?'bd-left':''" @click="linkTo(value.id,value.url)">
						<view>
							<image style="width: 80rpx; height: 80rpx;border-radius: 30%;" :src="value.img"></image>
						</view>
						<view class="ft12 mt6">{{value.title}}</view>
					</view>
					</block>
				</view>
				<view v-if="shopmenu.length>5" class="integal-mall-menu flex pt10 pb10">
					<block v-for="(value,key) in shopmenu" :key="key" v-if="key>4 && key<10">
					<view class="col5 text-center" :class="key>5?'bd-left':''" @click="linkTo(value.id,value.url)">
						<view>
							<image style="width: 80rpx; height: 80rpx;border-radius: 30%;" :src="value.img"></image>
						</view>
						<view class="ft12 mt6">{{value.title}}</view>
					</view>
					</block>
				</view>
			</view>
			<!-- <view v-if="shopad.length>2" style="width: 100%; height: 340upx; margin-top: 30upx;">
				<view style="width: 49%; height: 340upx; float: left;">
					<image mode="aspectFill" @click="linkTo(shopad[2].id,shopad[2].url)" style="width: 100%; height: 100%; border-radius: 10upx;" :src="shopad[2].image"></image>
				</view>
				<view style="width: 49%; height: 320upx; float: right;">
					<image mode="aspectFill" @click="linkTo(shopad[1].id,shopad[1].url)" style="width: 100%; height: 165upx; border-radius: 10upx;" :src="shopad[1].image"></image>
					<image mode="aspectFill" @click="linkTo(shopad[0].id,shopad[0].url)" style="width: 100%; height: 165upx; margin-top: 10upx; border-radius: 10upx;" :src="shopad[0].image"></image>
				</view>
			</view>
			 -->
		<!-- 	<view class="mt24">
				<view class="flex alcenter space">
					<view class="flex alcenter">
						<image style="width: 40rpx;height: 40rpx;" :src="statics.integralMallCat[1]"></image>
						<text class="ft16 ftw600 cl-main ml15">优惠券</text>
					</view>
					<navigator url="/pages/client/coupon/index">
					<view class="ft14 cl-notice">更多</view>
					</navigator>
				</view>
				<view class="mt16 flex space ">
					<view class="integral-mall-couponyh">
						<view class="topyh">
							<view class="text-center ft14 ftw600 cl-mainyh">
								优惠券
							</view>
							<view class="flex center mt12">
								<view class="coupon-valueyh">
									<image :src="statics.couponNumBg"></image>
									<view class="numyh cl-orange">
										<text class="ft24 ftw600">¥</text>
										<text class="ft24 ftw600 ml4">20</text>
									</view>
								</view>
							</view>
							<view class="text-center mt8 ft12 cl-notice">满50元可用</view>
							<view class="flex alcenter center mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<text class="ft16 cl-orange ftw600">3000 + ¥10</text>
							</view>
						</view>
						<view class="mt12 flex center">
							<view class="btn-small" :data-id="1" @click="exchange" style="width:250rpx; background: #01B750; color: #ffffff;">领取</view>
						</view>
						<view class="y-lyh"></view>
						<view class="y-ryh"></view>
					</view>
					<view class="integral-mall-couponyh">
						<view class="topyh">
							<view class="text-center ft14 ftw600 cl-mainyh">
								优惠券
							</view>
							<view class="flex center mt12">
								<view class="coupon-valueyh">
									<image :src="statics.couponNumBg"></image>
									<view class="numyh cl-orange">
										<text class="ft24 ftw600">¥</text>
										<text class="ft24 ftw600 ml4">50</text>
									</view>
								</view>
							</view>
							<view class="text-center mt8 ft12 cl-notice">满100元可用</view>
							<view class="flex alcenter center mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<text class="ft16 cl-orange ftw600">3000 + ¥10</text>
							</view>
						</view>
						<view class="mt12 flex center">
							<view class="btn-small" :data-id="1" @click="exchange"  style="width: 250rpx; background: #01B750; color: #ffffff;">领取</view>
						</view>
						<view class="y-lyh"></view>
						<view class="y-ryh"></view>
					</view>
					
				</view>
				
							
			</view> -->
			<view class="mt24" v-if="datasa">
				<view class="flex alcenter space">
					<view class="flex alcenter">
						<image style="width: 40rpx;height: 40rpx;" src="@/static/shop/tuij.png"></image>
						<text class="ft16 ftw600 cl-main ml15">推荐商品</text>
					</view>
					<navigator url="/pages/client/recommend">
						<view class="ft14 cl-notice">更多</view>
					</navigator>
				</view>
				<view class="mt16 flex space">
				
						<block v-for="(value,key) in datasa" :key="key" v-if="key<3">
						<view class="box" style="position: relative; padding-bottom: 10upx;" :style="datasa.length>2?'width: 220rpx;':'width: 330rpx;'" @click="detail(value.id)">
							<!-- <view class="btn-mini zhekou" v-if="value.vipzk*1<10">会员{{value.vipzk}}折</view> -->
							<image class="integral-mall-goods" :style="datasa.length>2?'height: 220rpx;':'height: 330rpx;'" mode="aspectFill" :src="value.img"></image>
							<view class="mt5 ft14 text-center text-over cl-main">{{value.title}}</view>
							<view class="mt5 flex alcenter center">
								<text class="ft14 cl-orange ftw600">¥{{value.money}}</text>
								<text v-if="value.money_primary>0" class="ml10 ft10 cl-notice text-line">¥{{value.money_primary}}</text>
								<text v-if="value.team_rebate>0 && bus_id > 0" class="ml10 ft10 cl-notice text-line">¥{{value.team_rebate}}</text>
							</view>
						</view>
						</block>	
				
			
				</view>
			</view>	
		</view>		
		<button open-type="share" v-if="isLogin" style="width: 80rpx;
		height: 80rpx;position: fixed;
		bottom: 200rpx;right: 20rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
		display: flex;justify-content: center;align-items: center;padding: 0;z-index: 10;">
			<image src="../../static/fenxiang.png"   style="width: 42rpx;height: 38rpx;"></image>
		</button>
		<button open-type="contact" v-if="isLogin" style="width: 80rpx;
		height: 80rpx;position: fixed;
		bottom: 80rpx;right: 20rpx;
		border-radius: 50%;
		background:rgba(0, 0, 0, 0.1);
		display: flex;justify-content: center;align-items: center;padding: 0;z-index: 10;">
			<image src="../../static/kf.png"   style="width: 42rpx;height: 38rpx;"></image>
		</button>
		<home-shop :datasa="likedata" ref="shop"></home-shop>
		<!-- <com-footer model="index"></com-footer> -->
	</view>
</template>
<script>
	export default{
		data(){
			return {
				navLock:false,
				datasa:[],
				dataconfig:[],
				banners:[],
				shopmenu:[],
				shopad:[],
				datainfo:[],
				dataindex:[],
				likedata:[],
				mendian:[],
				mbgColor:this.$mbgColor,
				share:{},
				isLogin:false,
				bus_id : 0,
			}
		},
		onShareAppMessage(res) {
			let id = uni.getStorageSync("userinfo").id;
			console.log(this.share,res)
		    if (res.from == 'button') { 
		      return {
		        title:  this.share.share_title,
				imageUrl:this.share.share_img,
		        path: '/pages/client/index?id='+id
		      }
		    }else{
				return {
				 title:  this.share.share_title,
				 imageUrl:this.share.share_img,
				  path:'/pages/client/index?id='+id
				}
			}
		    
		  },
		onReachBottom() {
			this.$refs.shop.xiala()
		},
		onLoad(e){
			this.bus_id = uni.getStorageSync("userinfo").bus_id;

			if(e.id){
				uni.setStorageSync('shareid', e.id);
			} 
		},
		onShow() {
			this.bus_id = uni.getStorageSync("userinfo").bus_id;
			this.isLogin = uni.getStorageSync("token")?true:false
			this.getList(0);
			let this_=this
			if(this.isLogin){
				this.$ajax('post','share/config').then(res=>{
					this.share=res.data
				})
				this.$ajax('post','cart/num').then(res=>{
					uni.setTabBarBadge({
						index:2,
						text:String(res.data)
					})
				})
			}
		},
		onPullDownRefresh(){
			uni.showLoading({
			    title: '加载中'
			});
			this.getList(0);
		},
		methods:{
			 getList(offset) {
				
				let this_=this
				let data = {};
				if(uni.getStorageSync("token")){
					data.token = uni.getStorageSync("userinfo").token;
					data.uid = uni.getStorageSync("userinfo").id;
				}
				data.limit=15
				data.offset=15*offset
				data.ishot=1
				data.page=1
				this.$ajax('post','index/index',data).then(res=>{
					 wx.setNavigationBarTitle({
								      title:res.data.config 
								    })
					uni.stopPullDownRefresh();
					setTimeout(function() {
					    uni.hideLoading();  
					},150)
					let d = res.data
					this.banners=d.adv
					this.mendian=d.bus
					this.shopmenu=d.img_cate_list
					this.likedata=d.txt_cate_list
					this.datasa = d.datasa
					uni.setStorage({//缓存配置信息
						key: 'busId',  
						data: d.bus.city_id
					})
					uni.setStorage({//缓存配置信息
						key: 'mendian',  
						data: d.bus
					})
					setTimeout(()=>{
						this.$refs.shop.fenlei(this.likedata[0].id)
					},100)
					// if(data.data.gwccount>0){
					// 	this.setTabBarBadges(data.data.gwccount)
					// }
				})
			},
			setTabBarBadges(count){
				if(count>=99){
					count='99+'
				}
				if(count<=0){
					uni.removeTabBarBadge({
					  index: 2
					})
				}else{
					uni.setTabBarBadge({
					  index: 2,
					  text: ""+count+""
					})
				}
			},
			webconfig() {
				let this_=this
				let data = {};
				uni.request({
					url: this.configs.webUrl+'/api/index/webconfig',
					data: data,
					success: data => {
						console.log(data.data.data)
						uni.setStorage({//缓存配置信息
							key: 'config',  
							data: data.data.data
						})
						this.banners=data.data.data.banner
						this.shopmenu=data.data.data.shopmenu
						if(data.data.data.name){
							uni.setNavigationBarTitle({
							    title: data.data.data.name
							});
						}
					},
					fail: (data, code) => {
					}
				});
			},
			saoma(){
				//#ifdef APP-PLUS  
				uni.scanCode({
				    success: function (res) {
						if(res.result.indexOf("uid") != -1){
							var obj = JSON.parse(res.result); 
							if(obj.uid){
								uni.navigateTo({
									url:'/pages/login/reg?uid='+obj.uid
								})
							}	
						}else{
							uni.showToast({ title: res.result,icon:"none" });	
						}	
				    }
				});
				//#endif
				
			},
			detail(id,lx){
				uni.navigateTo({
					url:'/pages/client/shop/product?id='+id
				})
			},
			linkTo(id,link){
				if(this.isLogin == false){
					this.showLogin = true;
				}else{
					if(link){
						uni.navigateTo({
							url:link
						})
					}else{
						uni.navigateTo({
						    url: '/pages/client/shop/categorys?currentId='+id
						})
					}					
				}
			},
			exchange(e){
				if(this.isLogin == false){
					this.showLogin = true;
				}else{
					let id = e.currentTarget.dataset.id;
					uni.navigateTo({
						url:'/pages/client/coupon/index'
					})
				}
			},
		},
	}
</script>

<style>
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	.
	.home-header{
		height: 280rpx;
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	/* #ifdef APP-PLUS  */
	.home-header{
		height: 380rpx;
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	/* #endif */
	.home-main{
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}
	.home-mendian{
		width: 250rpx;
		height: 100rpx;
		border-radius: 16rpx;
	}
	.integral-mall-header{
		position: relative;
		height: 320rpx;
	}
	.integral-mall-header .bg{
		width: 100%;
		height: 320rpx;
	}
	.integral-mall-header .main{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}
	.swiper-integral{
		height: 32rpx;
		width: 100%;
	}
	.integral-mall-main{
		position: relative;
		margin-top: 120rpx;
	}	
	.integal-mall-menutop{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.integal-mall-menu{
		width: 100%;
		height: 160rpx;
	/* 	background: #FFFFFF;
		border-radius: 16rpx; */
	}
	.integral-tuan-l{
		width: 240rpx;
		height: 180rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}
	
	
	.integral-mall-coupon{
		height: 408rpx;
		width: 330rpx;
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.integral-mall-coupon  .top{
		padding: 32rpx 40rpx 24rpx 40rpx;
		border-bottom: 2rpx dashed #FEC675;
	}
	.integral-mall-coupon  .y-l,.integral-mall-coupon  .y-r{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}
	.integral-mall-coupon  .y-l{
		left: -10rpx;
	}
	.integral-mall-coupon  .y-r{
		right: -10rpx;
	}
	.integral-mall-coupon   .coupon-value{
		width: 100%;
		height: 180rpx;
		position: relative;
	}
	.integral-mall-coupon  .coupon-value image{
		width: 100%;
		height: 180rpx;
	}
	.integral-mall-coupon  .coupon-value .num{
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.integral-mall-couponyh{
		height: 350rpx;
		width: 330rpx;
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-couponyh  .topyh{
		padding: 32rpx 40rpx 24rpx 40rpx;
		border-bottom: 2rpx dashed #FEC675;
	}
	.integral-mall-couponyh  .y-lyh,.integral-mall-couponyh  .y-ryh{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}
	.integral-mall-couponyh  .y-lyh{
		left: -10rpx;
	}
	.integral-mall-couponyh  .y-ryh{
		right: -10rpx;
	}
	
	.integral-mall-couponyh   .coupon-valueyh{
		width: 100%;
		height: 64rpx;
		position: relative;
	}
	.integral-mall-couponyh  .coupon-valueyh image{
		width: 100%;
		height: 64rpx;
	}
	.integral-mall-couponyh  .coupon-valueyh .numyh{
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}
	.integral-mall-goods{
		width: 100%;
		background: #F2F2F2;
		border-radius: 16upx;
	}
	.titleNview-placing {
		height: var(--status-bar-height);
		/* padding-top: 44px; */
		box-sizing: content-box;
	}
	.bd-left {
	    border-left: 1px solid rgba(230, 230, 230, 0.3);
	}
	.zhekou{
		background: rgb(255, 51, 40); 
		color: #ffffff; 
		position: absolute; 
		top: 10upx; 
		right:10upx; 
		border-radius: 10upx;
		font-size: 20upx;
		width: 110upx; 
		height: 36upx; 
		z-index: 1;
	}
</style>